<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东登录页面  </title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .homepage{
            width: 100%;
            height: 100%;
        }
        .box1{
            width: 100%;
            height: 60px;
            border: 1px solid blue;
        }
        .hydl{
            width:300px;
            height: 60px;
            margin: 0 50px;
        }
        .hydl img{
            vertical-align: middle
        }

        .hydl span{
            display: inline-block;
            height: 60px;
            font-size: 18px;
            color: gray;
            margin-left: 20px;
        }

        .box2{
            width: 100%;
            height: 400px;
            background-image:url(./img/banner.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .box2 .zhuce{
            float: right;
            margin: 50px 50px 0 0;
        }

        .biaodan{
            background-color: white;
            width: 250px;
            height: 250px;
            padding: 15px 8px 8px 5px;
        }
        .jdhy{
            width: 250px;
            line-height: 30px;
            /* border: 1px solid blue; */
            
        }
        .jdhy p{
            font-size: 18px;
            color: gray;

        }
        .jdhy span{
            float: right;
            font-size: 16px;
        }
        .jdgy span img{
            vertical-align: middle;
        }
        .yonghu{
            width: 220px;
            line-height: 30px;
            margin-top: 20px;


        }
        .mima{
            width: 220px;
            line-height: 30px;
            margin-top: 10px;

        }
        .zddl{
            margin-top: 20px;
        }
        .zddl span{
            float: right;
            
        }
        button{
            background-color:red;
            width: 250px;
            line-height: 30px;
            margin: 20px auto;
            font-size: 16px;
            color: white;

        }
        .box3{
            margin-top: 20px;
        }

        .box3 p {
            text-align: center;
        }





      
        







     
    </style>
   
</head>
<body>
    <div class="homepage">
        <div class="box1">
            <div class="hydl">
                <img src="./img/logo.png" alt="">
                <span>欢迎登录</span>
            </div>
        </div>
        <div class="box2">
            <div class="zhuce">
                <form  class="biaodan" action="">
                    <div class="jdhy">
                        <p>京东会员<span><img src="./img/icon5.jpg" alt="">立即注册</span></p>
                    </div>

                    <div>
                        <input class="yonghu" type="text" placeholder="京东会员立即注册">
                    </div>

                    <div>
                        <input class="mima" type="password" placeholder="邮箱/用户名/已验证手机">
                    </div>

                    <div class="zddl">
                         <input type="checkbox">
                         <label for="">自动登录<span>忘记密码?</span></label>
                    </div>

                    <button>登录</button>

                </form>
                
            </div>
        </div>
        <div class="box3">
            <p>关于我们| 联系我们| 人才招聘| 商家入驻| 广告服务| 手机京东| 友情链接| 销售联盟| 京东社区| 京东公益| English Site</p>
            <p>Copyright?2004-2017 京东JD.com 版权所有</p>
        </div>









    </div>
</body>
</html>